<template>
	<div>
		<Header></Header>
		<el-row v-loading="loading" style="margin-top: 80px;margin-left: 30px;margin-right: 10px">
			<el-row>
				<el-form :inline="true" style="float: left">
					<el-form-item :label="$t('orderInfo.companyName')" prop="companyId">
						<el-select v-model="searchForm.companyId" :placeholder="$t('orderInfo.selectCompany')" @change="query(1)"
						 clearable>
							<el-option v-for="(item,index) in companyList" :value="item.id" :key="index" :label="item.text">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="query(1)">{{$t('standard.query')}}</el-button>
						<el-button type="primary" @click="showAddDialog">{{$t('orderInfo.createOrder')}}</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-row>
				<el-table :data="itemList" stripe style="margin-left: -8px;width: 99%">
					<el-table-column align="left" prop="companyName" :label="$t('orderInfo.companyName')"></el-table-column>
					<el-table-column align="left" prop="orderIdStr" :label="$t('orderInfo.orderNum')"></el-table-column>
					<el-table-column align="left" prop="productName" :label="$t('orderInfo.newService')">
						<template slot-scope="scope" v-if="scope.row.productName!=null">
							{{scope.row.productName.split("-")[1]}}
						</template>
					</el-table-column>
					<el-table-column align="left" prop="createdDate" :label="$t('orderInfo.createTime')">
						<template slot-scope="scope">
							<span>{{scope.row.createdDate * 1000 | date('YYYY-MM-DD HH:mm:ss')}}</span>
						</template>
					</el-table-column>
					<el-table-column align="left" prop="outDate" :label="$t('orderInfo.dueTime')">
						<template slot-scope="scope">
							<span>{{scope.row.outDate | date('YYYY-MM-DD HH:mm:ss')}}</span>
						</template>
					</el-table-column>
				</el-table>
			</el-row>
			<el-row style="text-align: right;margin-top: 10px;margin-right: 1%">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.currentPage"
				 :page-sizes="[10, 20, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalNum">
				</el-pagination>
			</el-row>
			<el-dialog :title="dialogTitle" :visible.sync="addFormVisible" width="600px" align="left">
				<el-form :model="addForm" ref="addForm" :rules="addRules" label-width="150px" style="height: 200px">
					<el-form-item :label="$t('orderInfo.companyName')" prop="companyId">
						<el-select v-model="addForm.companyId" :placeholder="$t('orderInfo.selectCompany')" clearable>
							<el-option v-for="(item,index) in companyList" :key="index" :value="item.id" :label="item.text">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('orderInfo.newService')" prop="productIds">
						<el-checkbox-group v-model="addForm.productIds">
							<el-checkbox v-for="item in content" :label="item.id" :key="item.id" style="display:table-row-group">
								{{item.productName.split("-")[1]}}
							</el-checkbox>
						</el-checkbox-group>
						<el-row v-show="addForm.productIds.indexOf(1)>-1" style="margin-left: 50px; margin-top: -150px;height:180px">
							<el-form-item :label="$t('orderInfo.rentalTime')" prop="faceMonNum">
								<el-select v-model="addForm.faceMonNum" style="width: 80px;height: 28px; margin-top: 30px">
									<el-option v-for="item in productPriceList" :value="item.monNum" :key="item.id">
									</el-option>
								</el-select>
								<div style="float: right; width: 120px">{{$t('orderInfo.months')}}</div>
							</el-form-item>
						</el-row>
						<el-row v-show="addForm.productIds.indexOf(2)>-1" :style="[{'margin-left': '50px'}, {'margin-top': addForm.productIds.indexOf(1)>-1 ? '-110px' : '-80px'}]">
							<el-form-item :label="$t('orderInfo.rentalTime')" prop="imgMonNum">
								<el-select v-model="addForm.imgMonNum" style="width: 80px;">
									<el-option v-for="item in productPriceList" :value="item.monNum" :key="item.id">
									</el-option>
								</el-select>
								<div style="float: right; width: 120px">{{$t('orderInfo.months')}}</div>
							</el-form-item>
						</el-row>
						<el-row v-show="addForm.productIds.indexOf(4)>-1" :style="[{'margin-left': '50px'}, {'margin-top': addForm.productIds.indexOf(2)>-1 ? '-10px' : addForm.productIds.indexOf(1)>-1 ? '-65px' : '-30px'}]">
							<el-form-item :label="$t('orderInfo.rentalTime')" prop="meetingMonNum">
								<el-select v-model="addForm.meetingMonNum" style="width: 80px;height: 28px">
									<el-option v-for="item in productPriceList" :value="item.monNum" :key="item.id">
									</el-option>
								</el-select>
								<div style="float: right; width:120px">{{$t('orderInfo.months')}}</div>
							</el-form-item>
						</el-row>
					</el-form-item>
					<!-- <div style="margin-left: 220px; margin-top: -150px;height:180px">
                        <el-row v-show="addForm.productIds.indexOf(1)>-1" style="margin-top: 20px;">
                            <el-form-item label="租用时间11" prop="faceMonNum">
                                <el-select v-model="addForm.faceMonNum" style="width: 80px;height: 50px" >
                                    <el-option v-for="item in productPriceList"
                                               :value="item.monNum"
                                               :key="item.id"
                                    >
                                    </el-option>
                                </el-select>
                                <div style="float: right; width: 140px">个月</div>
                            </el-form-item>
                        </el-row>


                    </div>-->
				</el-form>
				<div slot="footer">
					<el-button @click="addFormVisible = false">{{$t('standard.cancel')}}</el-button>
					<el-button type="primary" @click="createOrder" :loading="addForm.saving">{{$t('standard.confirm')}}</el-button>
				</div>
			</el-dialog>
		</el-row>
	</div>

</template>

<script>
	import orderInfo from './orderInfo'

	export default orderInfo;
</script>

<style>

</style>
